
import {

    useNavigate,
    useOutlet,
    Route,
    Routes,

    useLocation, Navigate,
    MemoryRouter as Router
} from "react-router-dom";
import React from 'react';
import { Platform, StyleSheet, Text, TextInput, View, Button, ScrollView, Image } from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: Platform.OS === 'ios' ? 50 : 5, margin: 10,
        backgroundColor: 'purple'
    },
    root: {
        flex: 1,
    },
    webView: {
        flex: 1,
    },
    link: {
        padding: 10,
        backgroundColor: 'lightblue',
    },
});
const Home = () => {
    const navigate = useNavigate();
    const outlet = useOutlet();
    const [messages, setMessages] = React.useState(false);
    const [tasks, setTasks] = React.useState(true);
    return (
        <View>
            <Button title={`To Login by navigate("/login")`} onPress={() => {
                navigate("/login");
            }} />
            <Button title={"To Login by navigate(1)"} onPress={() => {
                navigate(1);
            }} />

            <Button title={"To detail by navigate(2)"} onPress={() => {
                navigate(2);
            }} />

            <Button title={"To Index3 by navigate(3) initialEntries下标"} onPress={() => {
                navigate(3);
                // 
            }} />

            <Button title={`To Index3 by navigate("/index3")`} onPress={() => {
                navigate("/index3");
            }} />
        </View>
    );
};

const Login = () => {
    const navigate = useNavigate();
    const [login, setLogin] = React.useState(false);
    const [warning, setWarning] = React.useState(false);
    const [username, setUsername] = React.useState('');
    const location = useLocation();

    return (
        <View>
            <Text>Welcome to the Login page!</Text>
            <Text>{location.state?.stateTest} </Text>
            <TextInput placeholder="Input your username" style={{
                color: 'black', height: 40, fontSize: 16, backgroundColor: 'white', borderColor: "blue", borderWidth: 1, borderRadius: 20, paddingLeft: 20
            }}
                onChangeText={(value) => {
                    setUsername(value);
                    setWarning(value.length == 0)
                }} />
            {warning && (<Text style={{ color: 'gray' }}>username is empty.</Text>)}
            <Button title={"Login by <Navigate/>"} onPress={() => {
                if (username.length == 0) {
                    setWarning(true)
                    return
                }
                setLogin(true)
            }} />
            {login && (<Navigate to="/detail" state={{ name: username }} replace={false} />)}

            <Button title={`Login by navigate("/detail")`} onPress={() => {
                if (username.length == 0) {
                    setWarning(true)
                    return
                }
                navigate("/detail", {
                    state: {
                        name: username
                    },
                    replace: false,
                    relative: 'route',
                    preventScrollReset: true,
                });

            }} />
            <Button title={"Back Home by navigate(-1)"} onPress={() => {
                navigate(-1);
            }} />
        </View>
    );
};


const Index3 = () => {
    const navigate = useNavigate();
    const location = useLocation();
    return (
        <View>
            <Text>---- Index3 page! ----</Text>
            <Text>`---- 如果跳转由navigate("/index3") navigate(-1),回返回上一个页面；如果由navigate(3)，则返回initialEntries 下标为2的页面 ----`</Text>
            <Button title={"Back Home by navigate(-1)"} onPress={() => {
                navigate(-1);
            }} />
            <Button title={"Back Home by navigate(-2)"} onPress={() => {
                navigate(-2);
            }} />
            <Button title={"Back Home by navigate(-3)"} onPress={() => {
                navigate(-3);
            }} />
        </View>
    );
};



const Detail = () => {
    const navigate = useNavigate();
    const location = useLocation();
    return (
        <View>
            <Text>{location.state?.name}  logged in successfully! Detail page!</Text>
            <Button title={"Logout"} onPress={() => {
                navigate(-1)
            }} />
            <Button title={"Back Home navigate(-2)"} onPress={() => {
                // seHome(true)
                // 返回上两个  replace={false} 需要
                navigate(-2);
            }} />
        </View>
    );
};


export function MemoryRouterExample() {
    const initialEntries = [
        "/",
        { pathname: "/login", state: { stateTest: "stateTestContent" } },
        { pathname: "/detail", state: { stateTest: "stateTestContent" } },
        "/index3",
    ];
    const location = {
        pathname: '/locationTest',
        search: '?id=1&name=test',
        hash: '#section1',
        key: "locationTest page",
    };
    const initialIndex = 0;


    return (<ScrollView style={styles.container}>

        <Router initialEntries={initialEntries} initialIndex={initialIndex} future={{ v7_startTransition: true }} >
            <Routes>
                <Route path="/" element={<Home />} >
                    {/* <Route path="messages" element={<HomeMessages />} />
                    <Route path="tasks" element={<HomeTasks />} /> */}
                </Route>
                <Route path="/login" Component={Login} />
                <Route path="/detail" element={<Detail />} />
                <Route path="/index3" element={<Index3 />} />
            </Routes>
        </Router>

    </ScrollView>);
}
export default MemoryRouterExample;
